<template>
   <div class="TeSe">
        <div class="Te_top">
            <span class="one"></span>
            <span class="two">特色专区</span>
        </div>
        <div class="content">
            <van-row class="One">
                <van-col span="12" v-for="item in newItemList" :key="item.id">
                    <p class="title">{{item.title}}</p>
                    <p class="tit">{{item.subtitle}}</p>
                    <div class="imgs">
                        <img :src="item.imageOne" alt="">
                        <img :src="item.imageTwo" alt="">
                    </div>
                </van-col>
                <van-col span="12" v-for="item in hotItemList" :key="item.id">
                    <p class="title">{{item.title}}</p>
                    <p class="tit">{{item.subtitle}}</p>
                    <div class="imgs">
                        <img :src="item.imageOne" alt="">
                        <img :src="item.imageTwo" alt="">
                    </div>
                </van-col>
            </van-row>
            <van-row class="Two">
                <van-col span="12"  v-for="item in vipItemList" :key="item.id">
                    <p class="title_s">{{item.title}}</p>
                    <p class="tit">{{item.subtitle}}</p>
                    <div class="imgs">
                        <img :src="item.imageOne" alt="">
                        <img :src="item.imageTwo" alt="">
                    </div>
                </van-col>
                <van-col span="6" v-for="item in otherItemList" :key="item.id">
                    <p class="title">{{item.title}}</p>
                    <p class="tit">{{item.subtitle}}</p>
                    <div class="imgs">
                        <img :src="item.image" alt="">
                    </div>
                </van-col>
                <van-col span="6" v-for="item in lowPriceItemList" :key="item.id">
                    <p class="title">{{item.title}}</p>
                    <p class="tit">{{item.subtitle}}</p>
                    <div class="imgs">
                        <img :src="item.image" alt="">
                    </div>
                </van-col>
            </van-row>
        </div>
   </div>
</template>

<script>
export default {
    name:"TraitView",
    data(){
        return{
            array:[],
            hotItemList:[],
            lowPriceItemList:[],
            newItemList:[],
            otherItemList:[],
            vipItemList:[],
        }
    },
    async created(){
        let res = await this.$http.getHomeApi();
        this.array = res.data.data.special_zone;
		// console.log(this.array)
        // 12月爆款
        this.hotItemList = this.array.hotItemList;
        // console.log(this.hotItemList)
        // 平价菜场
        this.lowPriceItemList = this.array.lowPriceItemList;
        // console.log(this.lowPriceItemList)
        // 新品尝鲜
        this.newItemList = this.array.newItemList;
        // console.log(this.newItemList)
        // 吃什么
        this.otherItemList = this.array.otherItemList;
        // console.log(this.otherItemList)
        // VIP专享
        this.vipItemList = this.array.vipItemList;
        // console.log(this.vipItemList)
    },
}
</script>

<style lang="less">
.TeSe{
    width: 100vw;
    .Te_top{
        box-sizing: border-box;
        padding: 0 .4rem;
        width: 95%;
        margin: 0 auto;
        height: 4rem;
        line-height: 4rem;
        display: flex;
        align-items: center;
        .two{
            font-size: 1.2rem;
            font-weight: bold;
            margin-right: .7rem;

        }
        .one{
            
            width: .3rem;
            height: 2rem;
            display: inline-block;
            margin-right: .7rem;
            background: rgb(65, 187, 67);
        }
    }
}

.content{
    width: 95%;
    margin: 0 auto;
    .One{
        .van-col{
            height: 6.5rem;
            box-sizing: border-box;
             padding: .6rem .6rem;
            border: 1px solid rgb(150, 149, 149);
            .title{
                color: rgb(255, 78, 42);
                font-weight: 400;
                font-size: .8rem;
            }
            .tit{
                margin-top: .3rem;
                font-weight: 400;
                font-size: .7rem;
            }
            .imgs{
                display: flex;
                width: 4rem;
                height: 3rem;
                img{
                    margin-right: 1rem;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .Two{
        .van-col{
            height: 6.5rem;
            box-sizing: border-box;
             padding: .6rem .6rem;
            border: 1px solid rgb(150, 149, 149);
            .title{
                color: rgb(34, 30, 29);
                font-weight: 600;
                font-size: .8rem;
            }
            .title_s{
                color: rgb(65, 187, 67);
                font-weight: 400;
                font-size: .8rem;
            }
            .tit{
                margin-top: .3rem;
                font-weight: 400;
                font-size: .7rem;
            }
            .imgs{
                display: flex;
                width: 4rem;
                height: 3rem;
                img{
                    margin-right: 1rem;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}





</style>